<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0; padding: 0;
            list-style: none;
        }
        .all{
            width: 1200px;
            height: 120px;
            margin: 100px auto;
            position: relative;
        }
        .screen{
            width: 1200px;
            height: 120px;
            overflow: hidden;
            position: relative;
            border-radius: 10px;
        }
        .screen ul{
            width: 6000px;position: absolute;left: 0; top: 0;
        }
        .screen li{
            width: 1200px; height: 120px; overflow: hidden; float: left;
        }
        .all ol{
            position: absolute; right: 10px; bottom: 10px;line-height: 20px;text-align: center;
        }
        .all ol li{
            float: left; width: 12px; height: 12px;background: #000;border: 1px solid #ccc;margin-left: 10px; cursor: pointer;
            opacity: 0.5;border-radius: 50%;
        }
        .all ol li.current{
            background: #fff;
        }
        #arr span{
            width: 40px; height: 40px; position: absolute;left: 5px; top: 50%;margin-top: -20px;background: #000; cursor: pointer; line-height: 40px; text-align: center;font-weight: bold; font-family: "黑体";font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff; 
        }
        #arr #right{
            right: 5px; left: auto;
        }
    </style>
</head>
<body>
    <div class="all" id="all">
        <div class="screen" id="screen">
            <ul id="ul">
                <li><img src="images/11769233042613296711.png" alt="" width="1200" height="120">图索引0，圆点索引0</li>
                <li><img src="images/14932392732619323941.jpg" alt="" width="1200" height="120">图索引1，圆点索引1</li>
                <li><img src="images/33972920152612927933.jpg" alt="" width="1200" height="120">图索引2，圆点索引3</li>
                <li><img src="images/47463294732619236474.png" alt="" width="1200" height="120">图索引3，圆点索引3</li>
                
            </ul>
            <ol>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ol>
            <div id="arr">
                <span id="left"><</span>
                <span id="right">></span>
            </div>
        </div>
    </div>
    <script src="public.js"></script>
    <script>
        var container=document.getElementById('screen');
        var ul=container.children[0];
        var ol=container.children[1];
        var pointArr=ol.children;
        var prev=container.children[2].children[0];
        var next=container.children[2].children[1];
        var width=ul.children[0].offsetWidth;
        var newLi=ul.children[0].cloneNode(true);
        var liArr=ul.children;
        ul.appendChild(newLi);
        var key=0;
        var index=0;
        for(var i=0;i<pointArr.length;i++){
            pointArr[i].onclick=function(){
                key=this.innerHTML-1;
                index=key;
                move(ul,'left',-index*width);
                light(key);
            }
        }
        next.onclick=autoplay;
        prev.onclick=function(){
            index--;
            key--;
            key=key<0?pointArr.length-1:key;
            if(index<0){
                index=liArr.length-2;
                ul.style.left=-(liArr.length-1)*width;
            }
            move(ul,'left',-index*width)
            light(key);
        }
        var timer=setInterval(autoplay,3000);
        container.onmouseenter=function(){
            clearInterval(timer);
        }
        container.onmouseleave=function(){
            clearInterval(timer);
            timer=setInterval(autoplay,3000);
        }
        function autoplay(){
            index++;
            key++;
            key=key>pointArr.length-1?0:key;
            if(index>liArr.length-1){
                index=1;
                ul.style.left=0;
            }
            move(ul,'left',-index*width);
            light(key);
        }
        function light(num){
            for(var i=0;i<pointArr.length;i++){
                pointArr[i].className='';
            }
            pointArr[num].className='current';
        }
    </script>
</body>
</html>